<template>
  <div class="member-info">
    <nav>
      <a @click="clickTab('base')" :class="{active: activeName === 'base'}" href="javascript:;">基本信息</a>
      <a @click="clickTab('interest')" :class="{active: activeName === 'interest'}" href="javascript:;">兴趣分类</a>
      <a @click="clickTab('size')" :class="{active: activeName === 'size'}" href="javascript:;">我的尺码</a>
    </nav>
    <!-- tab切换内容的地方 -->
    <!-- 在vue中动态的切换组件可以使用动态组件component组件 -->
    <component :is="'personal-' + activeName" ref="currentTab"></component>
  </div>
</template>

<script>
import { ref } from 'vue'
import PersonalBase from './components/personal-base.vue'
import PersonalInterest from './components/personal-interest.vue'
import PersonalSize from './components/personal-size.vue'
import Confirm from '@/components/library/confirm'
import { onBeforeRouteLeave } from 'vue-router'
export default {
  name: 'PersonalInfoIndex',
  components: {
    PersonalBase,
    PersonalInterest,
    PersonalSize
  },
  setup () {
    const currentTab = ref(null)
    const activeName = ref('base')
    const clickTab = (name) => {
      activeName.value = name
    }
    // 组件内路由守卫，用于路由离开前的操作
    onBeforeRouteLeave((to, from, next) => {
      // 如果当前激活的是个人信息，即进入导航守卫
      if (activeName.value === 'base') {
        if (currentTab.value && currentTab.value.infoHasUpdated()) {
          Confirm({ text: '个人信息有修改未保存，确定要离开吗？' }).then(() => {
            next()
          }).catch(e => {})
        } else {
          next()
        }
      } else {
        next()
      }
    })
    return { activeName, clickTab, currentTab }
  }
}
</script>

<style lang="less" scoped>
.member-info {
  height: 100%;
  background: #fff;
  nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
    .info-wrap {
      padding: 20px;
      min-height: 400px;
      position: relative;
    }
    .loading {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
    }
    .none {
      height: 400px;
      text-align: center;
      line-height: 400px;
      color: #999;
    }
  }
}
</style>
